<template>
    <div>
        <div class="userinfo-box">
            <div class="userinfo-tab">
                <a href="javascript:void(0);" @click="basicInfoShow(true,'1')" :class="{active:basicInfo}">平台公告</a>
                <a href="javascript:void(0);" @click="basicInfoShow(false,'2')" :class="{active:!basicInfo}">站内私信</a>
            </div>
            <!-- 平台公告 -->
            
            <Spin size="large" fix v-show="spinShow"></Spin>
            <div v-show="basicInfo">
                <Row >
                    <Col span="2"><Checkbox  v-model="single" @on-change="checkBox"><span class="announ">全选</span></Checkbox></Col>
                    <Col span="2"><span class="announ" @click="isRead">标记已读</span></Col>
                    <!-- <Col span="2"><span class="announ" @click="del">删除</span></Col>              -->
                </Row>
                <!-- 表格 -->
                <CheckboxGroup v-model="checkedList">
                    <Row v-for=" (d,i) in list" :key="i">
                        <Row class-name="metabel" type="flex" justify="start" class="code-row-bg" >
                            <Col span="1"><Checkbox :label="d.id"></Checkbox></Col>
                            <Col span="1" v-show="d.has_read==1"><img src="../../../assets/images/znx_03.png" alt=""></Col>
                            <Col span="1" v-show="d.has_read==0"><img src="../../../assets/images/znx_10.png" alt=""></Col>
                            <Col span="18" ><span class="pull3Span" @click="spanShow(d.id,i)">{{d.title}}</span></Col>
                            <Col span="4" >{{d.addtime}}</Col>
                        </Row>
                        <Row type="flex" justify="center" >
                            <Col span="22" push="-2">
                                <p :class="[flag==d.id?'trans2':'trans']" >{{d.content}}</p>
                            </Col>    
                        </Row>
                    </Row>
                </CheckboxGroup>
                <div class="page" v-show="pageShow">
                    <Page :total="ionw" @on-change="pagenow2(page)" :current.sync="page"></Page>
                </div>
            </div>

            <!-- 站内私信 -->
            <div v-show="!basicInfo">
                <Row >
                    <Col  span="2"><Checkbox v-model="single" @on-change="checkBox"><span class="announ">全选</span></Checkbox></Col>
                    <Col span="2"><span class="announ" @click="isRead">标记已读</span></Col>
                    <!-- <Col span="2"><span class="announ" @click="del">删除</span></Col>                -->
                </Row>
                <!-- 表格 -->
                <CheckboxGroup v-model="checkedList">
                    <Row v-for=" (d,i) in list" :key="i">
                        <Row class-name="metabel" type="flex" justify="start" class="code-row-bg" >
                            <Col span="1"><Checkbox :label="d.id"></Checkbox></Col>
                            <Col span="1" v-show="d.has_read==1"><img src="../../../assets/images/znx_03.png" alt=""></Col>
                            <Col span="1" v-show="d.has_read==0"><img src="../../../assets/images/znx_10.png" alt=""></Col>
                            <Col span="18" ><span class="pull3Span" @click="spanShow(d.id,i)">{{d.title}}</span></Col>
                            <Col span="4" >{{d.addtime}}</Col>
                        </Row>
                        <Row type="flex" justify="center">
                            <Col span="22" push="-2" >
                                <p :class="[flag==d.id?'trans2':'trans']">{{d.content}}</p>
                            </Col>    
                        </Row>
                    </Row>
                </CheckboxGroup>
                <div class="page" v-show="pageShow">
                    <Page :total="ionw" @on-change="pagenow2(page)" :current.sync="page"></Page>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
import formatDate from '../../../common/js/date.js';
export default {
    data() {
        return {
            pageShow: false,
            ionw: 0,
            basicInfo: true, //基本资料
            single: false,
            flag: null,
            list: [],//所有数据
            item: null,
            checkedList: [],
            spinShow: true,
            page: 1,
            type: 1,
        }
    },
    created() {
        this.basicInfoShow(true, this.type);
        if (this.$store.getters.setId=='') {
            this.flag = null 
            return
        } else {
            this.spanShow(this.$store.getters.setId, '1')
        }
        console.log(this.type, 'created.type')
    },
    methods: {
        del() {
            if (this.list.length == this.checkedList.length) {
                this.list = []
                this.checkedList = []
                this.single = false
                return
            }
            for (var i=0; i<this.list.length; i++) {
                for (var k=0; k<this.checkedList.length; k++) {
                    if (this.list[i].id == this.checkedList[k]) {
                        this.list.splice(i,1)
                        this.checkedList.splice(k,1)
                        i--
                    }
                }
            }
            if (this.ionw <= 10) {
                this.pageShow = false
            } else {
                this.pageShow = true
            }
        },
        checkBox() {
            this.checkedList = []
            if (this.single) {
                for (var i=0; i<this.list.length; i++) {
                    this.checkedList.push(this.list[i].id)
                }
            }
        },
        isRead() {
            console.log(this.type, 'isRead.type')
            let arr = []
            for (var i=0; i<this.checkedList.length; i++) {
                for (var k=0; k<this.list.length; k++) {
                    if (this.list[k].id == this.checkedList[i] && this.list[k].has_read == 0) {
                        this.list[k].has_read = 1
                        arr.push(this.checkedList[i])
                    }
                }
            }
            if (arr.length < 1) {
                this.$Message.info('您还没有选择未读消息')            
                return false
            }
            this.$http.post("?m=api&c=message&a=setMessageSatus", {
                token: localStorage.getItem("token"),
                type: this.type,
                ids: arr
            }).then(res=> {
                this.$Message.info(res.data.ret_msg)
            })
        },
        spanShow(id, i) {
            console.log(this.type, 'spanShow.type')
            if (this.flag == id) {
                this.flag = null           
            } else {
                this.flag = id
            }
            this.$http.post("?m=api&c=message&a=detail", {
                token: localStorage.getItem("token"),
                type: this.type,
                id: id
            }).then(res=> {
                if (res.data.status == 0) {
                    this.$http.post("?m=api&c=message&a=dataList", {
                        token: localStorage.getItem("token"),
                        type: this.type,
                        page: this.page
                    }).then(res=> {
                        if (res.data.status == 0) {
                            this.list = res.data.list
                            // this.list[i].has_read = res.data.list[i].has_read
                            this.list.forEach(val => {   
                                this.item = formatDate(new Date( val.addtime* 1000), 'yyyy-MM-dd hh:mm') 
                                val.addtime = this.item 
                            });
                        } else {
                            this.$Message.error(res.data.ret_msg)
                        }
                    })
                } else {
                    this.$Message.error(res.data.ret_msg)
                }
            })
        },
        basicInfoShow(basicInfo, type) {
            this.flag = null;
            this.spinShow = true;
            this.type = type;
            console.log(this.type, 'basicInfoShow.type')
            this.list = [];
            this.checkedList = [];
            this.basicInfo = basicInfo;
            this.page = 1;
            this.$http.post("?m=api&c=message&a=dataList", {
                token: localStorage.getItem("token"),
                type: type,
                page: this.page
            }).then(res=> {
                if (res.data.status == 0) {
                    this.spinShow = false;
                    this.list = res.data.list;
                    this.ionw = res.data.pageSum*10 
                    if (this.ionw <= 10) {
                        this.pageShow = false
                    } else {
                        this.pageShow = true
                    }
                    this.list.forEach(val => {   
                        this.item = formatDate(new Date( val.addtime* 1000), 'yyyy-MM-dd hh:mm') 
                        val.addtime = this.item 
                    });
                } else {
                    this.$Message.error(res.data.ret_msg)
                }
            })
        },
        pagenow2(num) {
            this.flag = null
            this.list = [];
            this.checkedList = [];
            console.log(this.type, 'pagenow2.type')
            this.$http.post("?m=api&c=message&a=dataList", {
                token: localStorage.getItem("token"),
                type: this.type,
                page: num
            }).then(res=> {
                if (res.data.status == 0) {
                    this.list = res.data.list
                    this.list.forEach(val => {   
                        this.item = formatDate(new Date( val.addtime* 1000), 'yyyy-MM-dd hh:mm') 
                        val.addtime = this.item 
                    });
                } else {
                    this.$Message.error(res.data.ret_msg)
                }
            })
        }
    },
    watch: {
        checkedList: {
            handler(newVal, oldVal) {
                if (newVal.length!=this.list.length || newVal.length<1) {
                    this.single = false
                } else {
                    this.single = true          
                }
            },
            deep: true
        }
    }
};
</script>
<style scoped>
.fl {
    position: relative;
}
.page {
    margin-top: 20px;
    width: 100%;
    text-align: center;
}
.announ {
    display: inline-block;
    padding: 15px 0px;
    font-size: 15px;
}
.announ:hover {
    cursor: pointer;
    color: #f3596a;
}
.metabel {
    border-top: 1px solid #EEE;
    padding: 15px 5px;
}
.trans {
    transition:0.5s all linear;
    width: 98%;
    border-radius:5px; 
    padding:0px 20px; 
    height: 0px;
    overflow: hidden;
    margin: 0px 17px;
    text-indent:2em;
    line-height: 30px;
}
.trans2 {
    transition:0.5s all linear;
    width: 98%;
    border-radius:5px; 
    padding: 10px 20px;  
    background: hsl(48, 100%, 96%);
    margin: 10px 17px;
    text-indent:2em;
    line-height: 30px;

}
.trans2:after {
    position: absolute;
    left: 55px;
    top: 1px;
    bottom: 0;
    content: '';
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid hsl(48, 100%, 96%);
}
.pull3Span:hover {
    color: red;
    cursor:pointer
}
</style>
<style>
.ivu-checkbox-group .ivu-checkbox-wrapper > span:last-child {
    display: none;
}
.ivu-col-span-2{
    margin-left: 5px !important;
}
</style>


// WEBPACK FOOTER //
// src/components/PersonalCenter/announcement/announcement.vue